import 'react-native-gesture-handler';

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/AntDesign';
import Home from './work/home/Home';
import More from './work/home/More';
import MoreShow from './work/home/MoreShow';
import Detail from './work/home/Detail';
import './common/global';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const TabNav = ({ navigation }) => {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#34B9C0',
        labelStyle: {
          fontSize: 14
        }
      }}
    >
      <Tab.Screen
        options={
          {
            title: '听首歌',
            tabBarIcon: ({ color }) => <Icon size={25} name="home" color={color}></Icon>,
          }
        }
        name="song" component={Home} />

      <Tab.Screen
        options={
          {
            title: '说句话',
            tabBarIcon: ({ color }) => <Icon size={25} name="message1" color={color}></Icon>,
          }
        }
        name="word" component={Home} />

      {/* 这个底部栏的title记得删除 */}
      <Tab.Screen
        options={
          {
            title: '播放器',
            tabBarIcon: ({ color }) => <Icon size={25} name="play" color={color}></Icon>,
          }
        }
        name="play" component={Home} />

      <Tab.Screen
        options={
          {
            title: '皮一下',
            tabBarIcon: ({ color }) => <Icon size={25} name="smileo" color={color}></Icon>,
          }
        }
        name="happy" component={Home} />

      <Tab.Screen
        options={
          {
            title: '我的',
            tabBarIcon: ({ color }) => <Icon size={25} name="user" color={color}></Icon>,
          }
        }
        name="mine" component={Home} />
    </Tab.Navigator>
  )
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name='tabnav'
          component={TabNav}
          options={{
            headerShown: false
          }} />
          <Stack.Screen name='more' component={More} options={{headerShown:false}}></Stack.Screen>
          <Stack.Screen name='moreshow' component={MoreShow} options={{headerShown:false}}></Stack.Screen>
          <Stack.Screen name='detail' component={Detail} options={{headerShown:false}}></Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>

  );
}


export default App;